<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script type="module">

    // 如果在编写 vue3 你 直接采用jsx 或 h的的写法得不到优化
    // import {
    //     createElementVNode as _createElementVNode,
    //     toDisplayString as _toDisplayString,
    //     openBlock as _openBlock,
    //     createElementBlock as _createElementBlock,
    //     render,
    //     reactive,
    //     toRefs,
    //     h
    // } from '/node_modules/vue/dist/vue.esm-browser.js';
    import {
        createElementVNode as _createElementVNode,
        toDisplayString as _toDisplayString,
        openBlock as _openBlock,
        createElementBlock as _createElementBlock,
        render,
        reactive,
        toRefs,
        h
    } from './runtime-dom.js';


    const myComponent = {
        setup() {
            const state = reactive({
                name: '123'
            })
            setTimeout(() => {
                state.name = '456'
            }, 1000)
            return {
                ...toRefs(state)
            }
        },
        render(_ctx) {
            let vnode = (_openBlock(), _createElementBlock("div", null, [
                _createElementVNode("h1", null, "Hello World"),
                _createElementVNode("span", null, _toDisplayString(_ctx.name), 1 /* TEXT */)
            ]))
            console.log(vnode)
            return vnode
        }

    }

    render(h(myComponent), document.body)



</script>

</html>